<template>
<div class="index">
    <!-- 年度简单统计 -->
    <Row :gutter="8">
        <Col :md='{span:12}'>
        <Card style="height: 320px" :dis-hover="true">
            <p slot="title">年度统计</p>
            <Table :columns="columsYear" border :data="listYear" @on-row-click="onRowClick" :show-header="true"></Table>
        </Card>
        </Col>
        <Col :md='{span:12}'>
        <Card style="height: 320px" :dis-hover="true">
            <p slot="title">月度统计</p>
            <Table :columns="columnsMonth" border :data="listMonth" :show-header="true"></Table>
        </Card>
        </Col>
    </Row>
    <!-- <hr/> -->
    <!-- 预约与检验状况 -->
    <Row>
      <Col span="24">
        <Card :dis-hover="true">
            <p slot="title">预约与检验情况</p>
            <Row>
                <Col span="24">
                    <Tooltip content="导出当前页数据" placement="bottom-start">
                            <Button type="ghost" size="small" @click="exportData()">
                                导出数据
                            </Button>
                    </Tooltip>
                </Col>
            </Row>
            <Table ref="table" :data="caseData" :columns="casecolumn" border :row-class-name="rowClass" size="small" @on-row-dblclick="dbClickHandler"></Table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page  size="small" :total="pageData.total" :current="pageData.current" @on-change="changePage"></Page>
                </div>
            </div>
        </Card>
      </Col>
    </Row>
</div>
</template>

<script>
// import json2xls from 'json2xls'
import { timeFormat } from '@/common/filter'
export default {
    name: 'index',
    data () {
        return {
            pageData: {
                total: 30,
                current: 1
            },
            orderData: {},
            listYear: [],
            listMonth: [],
            columsYear: [
                {
                    type: 'index'
                },
                {
                    title: '年份',
                    key: 'year'
                },
                {
                    title: '预约总数',
                    key: 'count'
                },
                {
                    title: '检验总数',
                    key: 'doing'
                }
            ],
            columnsMonth: [
                {
                    title: '月份',
                    key: 'month'
                },
                {
                    title: '预约总数',
                    key: 'count'
                },
                {
                    title: '检验总数',
                    key: 'doing'
                }
            ],
            caseData: [],
            casecolumn: [
                {
                    title: '案件名称',
                    key: 'Title'
                    // sortable: true
                },
                {
                    title: '案件编号',
                    key: 'No'
                    // sortable: true
                },
                {
                    title: '检验类型',
                    key: 'JyType',
                    render: (h, { row }) => {
                        let str = ''
                        for (let i = 0; i < this.jyType.length; i++) {
                            if (row.JyType == this.jyType[i].value) {
                                str = this.jyType[i].name
                            }
                        }
                        return h('span', {}, str)
                    }
                },
                {
                    title: '当前状态',
                    key: 'Status',
                    render: (h, {row}) => {
                        let str = ''
                        let color = 'default'
                        switch (row.Status) {
                        case 2:
                            str = '预约审核中'
                            color = '#80848f'
                            break
                        case 3:
                            str = '待送检'
                            color = '#5cadff'
                            break
                        case 4:
                            str = '检验中'
                            color = '#2d8cf0'
                            break
                        case 5:
                            str = '鉴定中'
                            color = '#2d8cf0'
                            break
                        case 6:
                            str = '待取件'
                            color = '#c3da7b'
                            break
                        case 7:
                            str = '已完成'
                            color = '#19be6b'
                            break

                        }
                        return h('Tag', {
                            props: {
                                type: 'border',
                                name: str,
                                color: color
                            }
                        }, str)
                    }
                },
                {
                    title: '预约人',
                    key: 'Creater'
                },
                {
                    title: '单位',
                    key: 'DeptName'
                },
                {
                    title: '联系电话',
                    key: 'Phone'
                },
                {
                    title: '填报时间',
                    key: 'Ctime',
                    render: (h, {row}) => {
                        return h('div', [h('strong', timeFormat(row.Ctime))])
                    }
                }
            ],
            jyType: [
                {
                    name: '痕迹',
                    value: 0,
                    children: [
                        {
                            name: '手印',
                            value: 0
                        },
                        {
                            name: '足迹',
                            value: 1
                        },
                        {
                            name: '工具',
                            value: 2
                        },
                        {
                            name: '枪弹',
                            value: 3
                        },
                        {
                            name: '特殊',
                            value: 4
                        },
                        {
                            name: '爆炸',
                            value: 5
                        },
                        {
                            name: '其它',
                            value: 6
                        }
                    ]
                },
                {
                    name: '法医',
                    value: 1,
                    children: [
                        {
                            name: '尸体',
                            value: 0
                        },
                        {
                            name: '活体',
                            value: 1
                        },
                        {
                            name: '其它',
                            value: 2
                        }
                    ]
                },
                {
                    name: 'DNA',
                    value: 2,
                    children: [
                        {
                            name: '案件检验',
                            value: 0
                        },
                        {
                            name: '违法犯罪人员血样',
                            value: 1
                        },
                        {
                            name: '其它',
                            value: 2
                        }
                    ]
                },
                {
                    name: '理化',
                    value: 3,
                    children: [
                        {
                            name: '毒品',
                            value: 0
                        },
                        {
                            name: '毒物',
                            value: 1
                        },
                        {
                            name: '微量物证',
                            value: 2
                        },
                        {
                            name: '酒精含量',
                            value: 3
                        },
                        {
                            name: '其它',
                            value: 4
                        }
                    ]
                },
                {
                    name: '文检',
                    value: 4,
                    children: [
                        {
                            name: '笔记',
                            value: 0
                        },
                        {
                            name: '印章',
                            value: 1
                        },
                        {
                            name: '其他',
                            value: 2
                        }
                    ]
                },
                {
                    name: '电子物证',
                    value: 5,
                    children: [
                        {
                            name: '手机',
                            value: 0
                        },
                        {
                            name: '电脑',
                            value: 1
                        },
                        {
                            name: '存储设备',
                            value: 2
                        },
                        {
                            name: '其它',
                            value: 3
                        }
                    ]
                }
            ]
        }
    },
    computed: {
        // edata () {
        //     let data = JSON.parse(JSON.stringify(this.caseData))
        //     data.forEach(v => {
        //         v.Ctime = timeFormat(v.Ctime)
        //         let str = ''
        //         for (let i = 0; i < this.jyType.length; i++) {
        //             if (v.JyType === this.jyType[i].value) {
        //                 str = this.jyType[i].name
        //             }
        //         }
        //         v.JyType = str
        //     })
        //     return data
        // }
    },
    methods: {
        dbClickHandler (row) {
            this.$Modal.confirm({
                title: '删除数据',
                content: '确定要删除这条数据吗？ 这将删除相关内容并无法找回！',
                // okText: '确认删除',
                closable: true,
                onOk: () => {
                    this.delRelated(row)
                }
            })
        },
        delRelated (row) {
            this.$api.DelCaseRealated(row).then(res => {
                this.$Message.success('删除成功！')
                this.getCase()
            })
        },
        exportData () {
            this.$api.GetAllCaseForExport().then(res => {
                console.log(res.Data)
                this.$refs.table.exportCsv({
                    filename: '预约与检验情况',
                    original: false,
                    quoted: false,
                    columns: this.casecolumn,
                    data: res.Data
                })
            })

            // var xls = json2xls(this.caseData)

            // fs.writeFileSync('data.xlsx', xls, 'binary')
        },
        rowClass (row, index) {
            let classStr = ''
            switch (row.Status) {

            case 2:
                classStr = 'row-flowing'
                break
            case 3:
                classStr = 'row-cin'
                break
            case 4:
                classStr = 'row-jy'
                break
            case 5:
                classStr = 'row-jd'
                break
            case 6:
                classStr = 'row-cout'
                break
            case 7:
                classStr = 'row-finish'
                break
            default:
                break
            }
            return classStr
        },
        changePage (key) {
            // console.log(key)
            this.pageData.current = key
            this.getCase()
        },
        onRowClick (row, index) {
            // console.log(row)
            this.getmonth(row)
        },
        getyear () {
            this.$api.StatisticsSfyyByYear().then(res => {
                console.log(res)
                console.log(res)
                if (res.code === 0) {
                    this.listYear = res.Data
                }
            })
        },
        getmonth (data) {
            this.$api.StatisticsSfyyByMonth(data).then(res => {
                console.log(res)
                if (res.code === 0) {
                    this.listMonth = res.Data
                }
            })
        },
        getCase () {
            this.$api.QueryAllCase(this.pageData).then(res => {
                this.pageData.total = res.Data.total
                this.caseData = res.Data.res
            }, err => {
                this.$Message.error(err, 4)
            })
        },
        get (data) {
            this.orderData.order = data
            this.orderData.edit = false
            this.$router.push({
                name: '司法检验审核',
                params: {
                    orderData: this.orderData
                }
            })
        }
    },
    created () {},
    mounted () {
        this.getyear()
        this.getCase()
    }
}
</script>
<style scoped>
.row-flowing {
  background-color: #80848f;
}
.row-cin {
  background-color: #5cadff;
}

.row-jy {
  background-color: #2d8cf0;
}
.row-jd {
  background-color: #2d8cf0
}
.row-cout {
  background-color: #c3da7b
}
.row-finish {
   background-color: #19be6b
}
</style>


